<template>
	<view class="box">
		<!-- 搜索组件 -->
		<my-search></my-search>
		<!-- 图片 -->
		<swiper indicator-active-color="#1DB0FC" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000" :circular="true">
			<swiper-item>
				<view class="swiper-item">
					<image :src="swiper_image"></image>
					<!-- <image src=""></image> -->
				</view>
			</swiper-item>
		</swiper>
		<!-- 页面提示字 -->
		<view class="title">
			<view class="line"></view>
			<view class="name">{{ query.name }}</view>
			<view class="line"></view>
		</view>
		<!-- 商品view -->
		<view class="wrapper">
			<view class="wrapper-item" v-for="item in hotGoodsList" :key="item.id">
				<image :src="item.goods_images[0]"></image>
				<!-- 商品信息 -->
				<view class="underline">
					<view class="goods_name">{{ item.goods_name }}</view>
					<!-- 商品信息 -->
					<view class="goods_info">
						<view class="">
							<view class="price">￥{{ item.goods_price }}</view>
							<view class="sales">已售{{ item.goods_sales }}件</view>
						</view>
						<view class="" @click="addCard(item)">
							<button class="add-cart">加入购物车</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 备案 -->
		<view class="foot">蜀ICP备2023008183号-1</view>
	</view>
</template>

<script>
	// 导入api
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				// 页面地址参数
				query: '',
				// 图片素材
				swiper_image: '',
				// 超值爆款商品列表
				hotGoodsList: [],
			}
		},
		methods: {
			getSwImg() {
				// 判断是哪个页面
				if (this.query.name == "今天推荐") {
					this.swiper_image = "https://chenjdd.oss-cn-chengdu.aliyuncs.com/wukongshop/素材/超值爆款素材/今日推挤背景.png";
				} else if (this.query.name == "热门榜单") {
					this.swiper_image = "https://chenjdd.oss-cn-chengdu.aliyuncs.com/wukongshop/素材/超值爆款素材/今日推挤背景.png";
				} else if (this.query.name == "首发新品") {
					this.swiper_image = "https://chenjdd.oss-cn-chengdu.aliyuncs.com/wukongshop/素材/超值爆款素材/首发新品背景.png";
				} else if (this.query.name == "促销单品") {
					this.swiper_image = "https://chenjdd.oss-cn-chengdu.aliyuncs.com/wukongshop/素材/超值爆款素材/促销单品背景.png";
				}
			},
			addCard(item) {
				// 加入购物车
				api.addCart(item.goods_id).then(res => {
					// 加入失败
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err)
						return;
					}
					// 加入成功
					uni.$showMsg(res.data.msg);
					location.reload();
				})
			}
		},
		onLoad(option) {
			this.query = option;
			// 判断是哪个页面
			this.getSwImg();
			// 获取超值爆款商品
			api.getHotGoods(this.query.type, {
				"page": 1,
				"limit": 10
			}).then(res => {
				// 获取失败
				if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
				// 获取成功
				this.hotGoodsList = res.data.data.list;
				uni.$showMsg(res.data.msg);
			})
		}
	}
</script>

<style>
	/* 图片 */
	.swiper-item {
		margin: 20rpx auto;
		width: 95%;
		height: 95%;
		border-radius: 12px;
	}

	image {
		border-radius: 12px;
		width: 100%;
		height: 100%;
	}

	/* 页面提示字 */
	.title {
		height: 64px;
		font-size: 17px;
		color: #282828;
		display: flex;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
	}

	.title .line {
		width: 101px;
		height: 1px;
		background-color: #e9e9e9;
	}

	.title .name {
		font-family: iconfont !important;
		font-size: 16px;
		font-style: normal;
		margin: 0 20rpx 0 20rpx;
	}

	/* 商品view */
	.wrapper {
		background: #fff;
		box-sizing: border-box;
	}

	.wrapper-item {
		width: 100%;
		height: 100%;
		position: relative;
		padding-left: 16px;
		padding-top: 16px;
		display: flex;
		justify-content: space-around;
	}

	.wrapper-item image {
		width: 180rpx;
		height: 180rpx;
	}

	.wrapper-item .underline {
		font-size: 16px;
		color: #222;
		width: 250px;
		padding: 16px 16px 16px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.underline .goods_name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 15rpx;
	}

	/* 商品信息 */
	.underline .goods_info {
		position: relative;
		top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	/* 价格 */
	.underline .goods_info .price {
		color: rgb(253, 80, 47);
		padding: 0 10rpx;
		font-weight: 600;
		font-size: 17px;
	}

	/* 销量 */
	.underline .goods_info .sales {
		margin-left: 16rpx;
		margin-top: 5rpx;
		font-size: 11px;
		color: #aaa;
	}

	/* 加入购物车 */
	.add-cart {
		margin-right: 20rpx;
		color: white;
		text-align: center;
		line-height: 70rpx;
		font-size: 13px;
		width: 180rpx;
		height: 70rpx;
		border-radius: 7px;
		color: #FFFFFF;
		background: linear-gradient(to right, #00c6fc, #9adcf1);
	}

	.foot {
		width: 300rpx;
		height: 39px;
		margin: 80rpx auto;
		display: block;
		font-size: 12px;
		text-align: center;
		line-height: 39px;
		color: #CCCCCC;
	}
</style>